<!-- 家教 -->
<template>
	<view class="big-box">
		<u-gap height="55" bgColor="#fff"></u-gap>
		<!-- 导航 -->
		<view class="daohanglan">
			<view class="jh-flex" @click=" selectType('科目')">
				<text>科目</text>
				<view class="jh-flex jh-flex-column jh-justify-center" v-show="!subjectShow">
					<u-icon name="arrow-down" color="#bebebe" size="15"></u-icon>
				</view>
				<view class="jh-flex jh-flex-column jh-justify-center" v-show="subjectShow">
					<u-icon name="arrow-up" color="#bebebe" size="15"></u-icon>
				</view>
			</view>
			<view class="jh-flex" @click="selectType('类型')">
				<text>
					类型
				</text>
				<view class="jh-flex jh-flex-column jh-justify-center" v-show="!typesOfShow">
					<u-icon name="arrow-down" color="#bebebe" size="15"></u-icon>
				</view>
				<view class="jh-flex jh-flex-column jh-justify-center" v-show="typesOfShow">
					<u-icon name="arrow-up" color="#bebebe" size="15"></u-icon>
				</view>
			</view>
			<view class="jh-flex" @click=" selectType('区域')">
				<text>
					区域
				</text>
				<view class="jh-flex jh-flex-column jh-justify-center" v-show="!regionShow">
					<u-icon name="arrow-down" color="#bebebe" size="15"></u-icon>
				</view>
				<view class="jh-flex jh-flex-column jh-justify-center" v-show="regionShow">
					<u-icon name="arrow-up" color="#bebebe" size="15"></u-icon>
				</view>
			</view>
			<view class="jh-flex" @click="selectType('性别')">
				<text>
					性别
				</text>
				<view class="jh-flex jh-flex-column jh-justify-center" v-show="!sexShow">
					<u-icon name="arrow-down" color="#bebebe" size="15"></u-icon>
				</view>
				<view class="jh-flex jh-flex-column jh-justify-center" v-show="sexShow">
					<u-icon name="arrow-up" color="#bebebe" size="15"></u-icon>
				</view>
			</view>

		</view>
		<!-- 老师列表 -->
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y jh-p-lr-30" @scrolltolower="teacherLower">
			<teacherList :teacherData="teacherData" @clickItem="clickItem"></teacherList>
		</scroll-view>
		<!-- 科目 -->
		<u-popup :show="subjectShow" mode="bottom" @close="close">
			<view class="jh-h-p-90" style="height: 90vh;">
				<view class="jh-flex jh-justify-between jh-p-lr-40 jh-solid-b jh-l-h-100 jh-h-100">
					<text @click="subjectShow = false">取消</text>
					<text class="jh-text-bold-900">选择科目</text>
					<text class="jh-text-green" @click="yesButton('科目')">确定</text>
				</view>
				<view class="jh-flex jh-h-p-100">
					<!-- 学历左边科目 -->
					<view class="jh-h-p-100 jh-solid-r">
						<view v-for="(item,index) in educationData" :key="index"
							:class="educationDataType === index ? 'borderHighlight':'' "
							class=" jh-h-100 jh-w-p-100  jh-p-40 " @click="subjectL(item,index)">
							<text :class="educationDataType === index ? 'colorHighlight' : ''">{{item.dictLabel}}</text>
						</view>
					</view>
					<!-- 右边科目 -->
					<view class="r-subject jh-flex-1 jh-p-10">
						<view class="jh-flex jh-flex-wrap jh-justify-start jh-h-150-min">
							<view v-for="(item,i) in ziList" :key="i"
								class="jh-w-160 jh-h-60 jh-l-h-60 jh-p-lr-20 jh-text-center jh-text-24 jh-b-r-16 jh-solid  jh-m-20"
								:class="subjectType == i? 'backgroundHighlight':'backgroundLight'"
								@click="subjectRclick(item,i)">
								<text>{{item.dictLabel}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 类型 -->
		<u-popup :show="typesOfShow" mode="bottom" @close="close">
			<view class="">
				<view class="jh-flex jh-justify-between jh-p-lr-40 jh-solid-b jh-l-h-100 jh-h-100">
					<text @click="typesOfShow = false">取消</text>
					<text class="jh-text-bold-900">选择类型</text>
					<text class="jh-text-green" @click="yesButton('类型')">确定</text>
				</view>
				<!-- 单选类型 -->
				<view class="">
				<!-- 	<u-radio-group v-model="typesOfValue" iconPlacement="right" shape="square" :borderBottom="true"
						placement="column">
						<u-radio activeColor="#19BE6B" v-for="(item,index) in typesOfData" :label="item.name"
							:name="item.id" @change="typesOfChange"></u-radio>
					</u-radio-group> -->
					<u-checkbox-group 
					    v-model="typesOfValue"
					    iconPlacement="right" 
						shape="square" 
					    :placement="column"
						:borderBottom="true"
						 @change="typesOfChange" 
						>
						
					   <u-checkbox
					            activeColor="#19BE6B" v-for="(item,index) in typesOfData" :label="item.name"
					            	:name="item.id"
					            >
					            </u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</u-popup>
		<!-- 区域 -->
		<u-popup :show="regionShow" mode="bottom" @close="close">
			<view class="jh-h-p-90" style="height: 90vh;">
				<view class="jh-flex jh-justify-between jh-p-lr-40 jh-solid-b jh-l-h-100 jh-h-100">
					<text @click="regionShow = false">取消</text>
					<text class="jh-text-bold-900">选择区域</text>
					<text class="jh-text-green" @click="yesButton('区域')">确定</text>
				</view>
				<!-- 单选区域 -->
				<scroll-view scroll-y="true" scroll-top="0" style="height:100%;" :enable-back-to-top="true">
					
<!-- 					<u-radio-group v-model="regionValue" iconPlacement="right" shape="square" :borderBottom="true"
						placement="column">
						<u-radio activeColor="#19BE6B" v-for="(item,index) in regionData" :label="item.dictLabel"
							:name="item.dictLabel" @change="regionChange"></u-radio>
					</u-radio-group> -->
					<u-checkbox-group
					    v-model="regionValue"
					    iconPlacement="right" 
						shape="square" 
					    :placement="column"
						:borderBottom="true"
						@change="regionChange" 
						>
						
					   <u-checkbox
					            activeColor="#19BE6B" v-for="(item,index) in regionData" :label="item.dictLabel"
					            	:name="item.dictLabel" 
					            >
					            </u-checkbox>
					</u-checkbox-group>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 性别 -->
		<u-picker title="选择性别" :show="sexShow" :columns="sexData" confirmColor="#04BC16" cancelColor="#000"
			@confirm="sexConfirm" @cancel="close"></u-picker>

	</view>
</template>

<script>
	import teacherList from "components/teacherList/index.vue"
	import {
		log
	} from "util"
	import {
		navigationSearch,
		TeacherTuiJian,
		findTypeData,
		findFatherIdData,
		TutorNumber

	} from '../../api/family/index.js'
	export default {
		components: {
			teacherList
		},
		data() {
			return {
				// 科目颜色显示
				educationDataType: 0,
				// 性别:
				sexShow: false,
				// 性别列表
				sexData: [
					['男', '女', '不限']
				],
				// 区域:
				regionShow: false,
				// 区域选中
				regionValue: '邢台',
				// 区域列表
				regionData: [],
				// 类型:
				typesOfShow: false,
				// 类型值
				typesOfValue: '',
				// 类型-列表
				typesOfData: [{
						name: '在校大学生',
						id: 0,
						disabled: false
					},
					{
						name: '在校研究生',
						id: 1,
						disabled: false
					},
					{
						name: '专业教师',
						id: 2,
						disabled: false
					}, {
						name: '其他',
						id: 3,
						disabled: false
					}
				],
				// 科目： 
				subjectData: [],
				// 右侧科目
				ziList: [],
				subjectShow: false,
				// 科目-学历
				educationData: [],
				subjectType: 0,
				// 名师推荐列表 
				teacherData: undefined,
				// 类型选择值
				typeSelection: '',
				// 区域选择值
				RegionSelection: '',
				// 科目
				educationDataValue: {
					fId: '',
					childLevel: ''
				},
				// 性别
				gender: '',
				// 总数
				total: null,
				// 个数
				page: 0,
				// 判断方式
				determine: false
			}
		},
		onLoad(e) {

			if (e.data !== undefined) {

				// this.determine = true
				TutorNumber({}).then(total => {
					this.total = total
					this.educationDataValue = JSON.parse(e.data)
					console.log(this.educationDataValue.fId);
					this.educationDataType = this.educationDataValue.fId
					this.subjectType = this.educationDataValue.childLevel
					this.yesButton()
					this.page = 0
				})
			} else {
				TutorNumber({}).then(total => {
					this.total = total
					TeacherTuiJian({
						pageNum: this.page += 1,
						pageSize: 7,
					}).then(res => {
						this.teacherData = res.rows
					})
				})
				// }
				// this.determine = true
			}

		},
		onShow() {
			this.subjectShow = false
			// if (this.determine === false) {
			let total = this.total / 6
			if (Math.ceil(total) > this.page) {
				this.page = 0
				if (this.page === 0) {
					TeacherTuiJian({
						pageNum: this.page += 1,
						pageSize: 7,
					}).then(res => {

						this.educationDataType = 0
						this.subjectType = 0
						this.teacherData = res.rows
						// this.kemuActiveFun(this.educationData[0])
					})
				}
			}

		},

		methods: {
			// 点击教师
			clickItem(e) {
				let data = {
					teacherId: e.id,
					position: '首页'
				}
				uni.navigateTo({
					url: '/components/teacherDetails/teacherDetails?data=' + JSON.stringify(data)
				});
			},
			// 底部刷新
			teacherLower() {
				let total = this.total / 6
				console.log(Math.ceil(total));
				if (Math.ceil(total) > this.page) {
					TeacherTuiJian({
						pageNum: this.page += 1,
						pageSize: 7,
					}).then(res => {
						// this.page++
						for (let i = 0; i <= res.rows.length - 1; i++) {
							this.teacherData.push(res.rows[i])
						}
					})
				}

			},
			// 性别确定
			sexConfirm(e) {
				// console.log(e);
				this.gender = e.indexs[0]
				this.sexShow = false
				this.determineApi()
			},
			// 区域选择
			regionChange(e) {
				
				this.RegionSelection = e[e.length-1]
			},
			// 类型选择
			typesOfChange(e) {
				this.typeSelection = e[e.length-1]
				
			},
			// 左侧学历选择
			subjectL(item, index) {
				this.subjectData = item.subject
				this.kemuActiveFun(item)
				this.educationDataType = index
			},
			// 右侧科目选择
			subjectRclick(item, index) {
				this.subjectType = index
			},
			// 科目确定 
			yesButton(txt) {
				if (txt == '科目') {
					this.educationDataValue = {
						fId: this.educationDataType,
						childLevel: this.subjectType,
					}
					this.subjectShow = false
				} else if (txt == '类型') {
					this.typesOfShow = false
				} else if (txt == '区域') {
					this.regionShow = false
				} else if (txt == '性别') {
					this.sexShow = false
				}
				this.determineApi()
			},
			// 确定接口
			determineApi() {
				// console.log(this.educationData[this.educationDataType].dictLabel);
				navigationSearch({
					sex: this.gender,
					region: this.RegionSelection,
					fId: this.educationDataValue.fId,
					childLevel: this.educationDataValue.childLevel,
					educType: this.typeSelection,

				}).then(res => {
					// console.log(res);
					this.teacherData = res.rows

				})
			},
			// 切换导航
			selectType(txt) {
				if (txt == '科目') {
					findTypeData({
						dictType: 'educ_subject'
					}).then(res => {

						this.educationData = res.data

						this.kemuActiveFun(this.educationData[this.educationDataType])
					})

					this.subjectShow = true
					this.typesOfShow = false
					this.regionShow = false
					this.sexShow = false
				}
				if (txt == '类型') {

					this.typesOfShow = true
					this.subjectShow = false
					this.regionShow = false
					this.sexShow = false
				}
				if (txt == '区域') {
					findTypeData({
						dictType: 'educ_teaching_area'
					}).then(res => {
						console.log(res);
						this.regionData = res.data
						// 	this.quyudata = res.data.data
						// 	this.quyudata.forEach((i) => {
						// 	this.$set(i, 'isxuan', false)
					})

					this.regionShow = true
					this.typesOfShow = false
					this.subjectShow = false
					this.sexShow = false
				}
				if (txt == '性别') {
					this.sexShow = true
					this.typesOfShow = false
					this.subjectShow = false
					this.regionShow = false
				}

			},
			//弹窗关闭 
			close() {
				this.subjectShow = false
				this.typesOfShow = false
				this.regionShow = false
				this.sexShow = false
			},
			// 科目子集更改
			kemuActiveFun(v) {
				console.log(v.dictCode);
				findFatherIdData({
					fatherId: v.dictCode
				}).then(res => {
					this.ziList = res.data
				})
			}
		},
	}
</script>

<style scoped>
	.backgroundLight {
		background-color: white;
		color: black;
	}

	.backgroundHighlight {
		background-color: #04bc16;
		/* border-color: #04BC16; */
		color: white;
	}

	.borderHighlight {
		border-right: #04bc16 5rpx solid;
	}

	.colorHighlight {
		color: #04bc16;
		font-weight: 600;
	}

	.r-subject {
		background-color: #f5f5f5;
	}

	.daohanglan {
		z-index: 99999;
		position: fixed;
		top: -1rpx;
		width: 100%;
		height: 80rpx;
		margin: 0 0 20rpx 0;
		background-color: white;
		display: flex;
		justify-content: space-around;
	}

	.daohanglan view {
		text-align: center;
		line-height: 80rpx;
	}

	.big-box {
		height: 100vh;
		width: 100%;
		background-color: white;
	}

	::v-deep .u-radio-group--row {
		display: flex;
		/* flex-direction: column !important; */
		justify-content: space-around;
		width: 90%;
		margin: auto;
	}

	::v-deep .u-radio-label--right {
		width: 100%;
		padding: 0 40rpx;
		margin: auto;
		height: 100rpx;
		line-height: 100rpx;
	}

	.scroll-Y {
		height: 92%;
	}
	::v-deep .u-checkbox-label--right {
		
		padding: 0 5%;
		height: 100rpx !important ;
		border-bottom: 1rpx solid #D7D7D7;
		}
</style>